<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            浏览 <span render-html="viewCount"> 0</span>
            回复 <span> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn" id="followBtn" render-fun="showBtn" render-key="author.id">关注</button>
                    <br>
                    <span render-fun="setCount" render-key="author.id">0 </span>篇游记
                    <span render-fun="setFans" render-key="author.id">0 </span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name">广州</span>
            </div>
        </div>
    </div>
    ,
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-fun="showPerson" render-key="person"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="content.content">

        </div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up" id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o" id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa" id="collectBtn"> 1</i>
        </div>
    </div>
</div>

<script>
    var param = getParams();
    var authorId;
    var userStr = sessionStorage.getItem("user");
    var user;
    var follow =0;//1表示已关注，0表示未关注
    var attentionId;
    if (userStr) {
        user = JSON.parse(userStr);
        $(".info").renderValues(user);
    }else{
        $("#collectBtn").addClass("fa-star-o");
    }


    if (param.id) {
        $.get("/travels", {id: param.id}, function (data) {
            authorId=data.author.id;
            if(authorId==user.id){
                $("#followBtn").attr("style","display:none;");
            }
            $(".travels").renderValues(data, {
                showPerson: function (item, value) {
                    var html = "";
                    if (value == 1) {
                        html= "一个人的旅行";
                    }else if (value == 2) {
                        html=  "和父母";
                    }else if (value == 3) {
                        html=  "和朋友";
                    }else if (value == 4) {
                        html=  "和同事";
                    }else if (value == 5) {
                        html=  "和爱人";
                    }else{
                        html=  "和其他";
                    }
                    $(item).html(html);
                },
                showBtn:function (item, value) {
                    $.get("/attentions",{"attentionUserId":authorId,"currentUserId":user.id},function (data) {
                        if(data){
                            $(item).text("已关注");
                            follow=1;
                            attentionId=data.id;
                        }
                    })

                },
                setCount:function (item, value) {
                    $.get("/travels/travelCount",{"authorId":value},function (data) {
                        $(item).text(data+" ");
                    });
                },
                setFans:function (item,value) {
                    $.get("/attentions/"+authorId+"/fans",function (data) {
                        $(item).text(data+" ");
                    })
                }
            });
        }, "json");
    }

    $.ajax({
        type:"PUT",
        url:"/travels/viewCount",
        data:{"travelId":param.id}
    })


    //收藏和取消收藏功能、收藏数显示
    //begin----------------------------------------------
    //统计收藏数
    var collectClickCount=0;
    var collectCount;
    var flag;//奇数表示已收藏，偶数表示未收藏
    $.get("/travels/collectCount",{"travelId":param.id},function (data) {
        collectCount = data;
        $("#collectBtn").text(" "+collectCount);
    })

    //显示收藏按钮的样式
    $.get("/travels/"+user.id+"/"+param.id,function (data) {
        if(data==true){
            $("#collectBtn").addClass("fa-star");
            flag=1;
        }else{
            $("#collectBtn").addClass("fa-star-o");
            flag=2;
        }
    })

    //收藏按钮的点击事件
    $("#collectBtn").click(function () {
        if(collectClickCount<5){
            if(flag%2==0){//如果未收藏
                $(this).removeClass("fa-star-o");
                $(this).addClass("fa-star");
                $.post("/travels/"+user.id,{"travelId":param.id},function (data) {

                });
                collectCount+=1;
                $("#collectBtn").text(" "+collectCount);
                flag = 1;
            }else{
                $(this).removeClass("fa-star");
                $(this).addClass("fa-star-o");
                $.ajax({
                    type:"DELETE",
                    url:"/travels/"+user.id,
                    data:{"travelId":param.id}
                })
                collectCount -= 1;
                $("#collectBtn").text(" " + collectCount);
                flag = 2;
            }
        }else{
            $(document).dialog({
                type: 'notice',
                infoText: '操作太频繁啦!',
                autoClose: 2500,
                position: 'bottom'  // center: 居中; bottom: 底部
            });
        }
        collectClickCount++;
    })

    //end----------------------------------------------------------



    $("#followBtn").click(function () {
        var btn = $(this);
        if(follow){
            $.ajax({
                type:"DELETE",
                url:"/attentions",
                data:{"aid":attentionId},
                success:function (data) {
                    btn.text("关注");
                    follow = 0;
                }
            })
        }else{
            $.post("/attentions", {"currentUser.id": user.id, "attentionUser.id": authorId}, function (data) {
                if (data.success) {
                    btn.text("已关注");
                    attentionId = data.data;
                }
            })
            follow = 1;
        }
    });
</script>

</body>

</html>